<template>
	<div class="system-add-dept-container">
		<el-drawer title="新增资源表" v-model="showWindows" @close="onCancel">
			<el-form ref="formRef" :model="sysResource" :rules="rules" size="small" label-width="30%" style="width: 90%">
				<el-form-item label="资源名称" prop="resourceName">
					<el-input v-model="sysResource.resourceName" placeholder="请输入资源名称" />
				</el-form-item>
				<el-form-item label="资源类型(1.目录 2.菜单 3.按钮)" prop="resourceType">
					<el-input v-model="sysResource.resourceType" placeholder="请输入资源类型(1.目录 2.菜单 3.按钮)" />
				</el-form-item>
				<el-form-item label="权限编码" prop="authCode">
					<el-input v-model="sysResource.authCode" placeholder="请输入权限编码" />
				</el-form-item>
				<el-form-item label="通用菜单" prop="isGeneral">
					<el-input v-model="sysResource.isGeneral" placeholder="请输入通用菜单" />
				</el-form-item>
				<el-form-item label="路径" prop="path">
					<el-input v-model="sysResource.path" placeholder="请输入路径" />
				</el-form-item>
				<el-form-item label="组件" prop="component">
					<el-input v-model="sysResource.component" placeholder="请输入组件" />
				</el-form-item>
				<el-form-item label="菜单图标" prop="icon">
					<el-input v-model="sysResource.icon" placeholder="请输入菜单图标" />
				</el-form-item>
				<el-form-item label="外部链接地址" prop="url">
					<el-input v-model="sysResource.url" placeholder="请输入外部链接地址" />
				</el-form-item>
				<el-form-item label="是否缓存页面" prop="isCache">
					<el-input v-model="sysResource.isCache" placeholder="请输入是否缓存页面" />
				</el-form-item>
				<el-form-item label="父级菜单ID" prop="parentId">
					<el-input v-model="sysResource.parentId" placeholder="请输入父级菜单ID" />
				</el-form-item>
				<el-form-item label="排序，越小越靠前" prop="sortValue">
					<el-input v-model="sysResource.sortValue" placeholder="请输入排序，越小越靠前" />
				</el-form-item>
				<el-form-item label="是否是外部链接" prop="isFrame">
					<el-input v-model="sysResource.isFrame" placeholder="请输入是否是外部链接" />
				</el-form-item>
			</el-form>
			<div class="el-drawer__footer">
				<el-button @click="onCancel" size="small">取 消</el-button>
				<el-button type="primary" @click="onSubmit" size="small">新 增</el-button>
			</div>
		</el-drawer>
	</div>
</template>

<script lang="ts">
import { reactive, ref, toRefs } from 'vue';
import { addSysResource } from '/@/api/system/resource/index';
import { ElMessage } from 'element-plus';

export default {
	name: 'addSysResource',
	emits: ['initTableData'],
	props: {},
	setup(props, context) {
		const formRef = ref();

		const state = reactive({
			showWindows: false,
			sysResource: {
				resourceName: '',
				resourceType: '',
				authCode: '',
				isGeneral: '',
				path: '',
				component: '',
				icon: '',
				url: '',
				isCache: '',
				parentId: '',
				sortValue: '',
				isFrame: '',
			},
			rules: {
				resourceName: [{ required: true, message: '请输入资源名称', trigger: 'blue' }],
				resourceType: [{ required: true, message: '请输入资源类型(1.目录 2.菜单 3.按钮)', trigger: 'blue' }],
				authCode: [{ required: true, message: '请输入权限编码', trigger: 'blue' }],
				isGeneral: [{ required: true, message: '请输入通用菜单', trigger: 'blue' }],
				path: [{ required: true, message: '请输入路径', trigger: 'blue' }],
				component: [{ required: true, message: '请输入组件', trigger: 'blue' }],
				icon: [{ required: true, message: '请输入菜单图标', trigger: 'blue' }],
				url: [{ required: true, message: '请输入外部链接地址', trigger: 'blue' }],
				isCache: [{ required: true, message: '请输入是否缓存页面', trigger: 'blue' }],
				parentId: [{ required: true, message: '请输入父级菜单ID', trigger: 'blue' }],
				sortValue: [{ required: true, message: '请输入排序，越小越靠前', trigger: 'blue' }],
				isFrame: [{ required: true, message: '请输入是否是外部链接', trigger: 'blue' }],
			},
		});

		//打开添加窗口
		const openWindows = () => {
			state.showWindows = true;
		};

		//取消
		const onCancel = () => {
			formRef.value.resetFields();
			state.showWindows = false;
		};

		//提交
		const onSubmit = () => {
			formRef.value.validate((valid: any) => {
				if (valid) {
					addSysResource(state.sysResource).then((res: any) => {
						if (res.code == 200) {
							onCancel();
							context.emit('initTableData');
						} else {
							ElMessage.error(res.message);
						}
					});
				}
			});
		};

		return {
			formRef,
			openWindows,
			onCancel,
			onSubmit,
			...toRefs(state),
		};
	},
};
</script>

<style scoped></style>
